/**
 * Created by Ford Zhang on 2017/1/7.
 */
addLoadEvent(prepareSlideshow);

function prepareSlideshow() {
	if (!document.getElementsByTagName)  return false;
	if (!document.getElementById) return false;

	if (!document.getElementById('link_list')) return false;
	if (!document.getElementById('preview')) return false;

	var preview = document.getElementById('preview');
	preview.style.position = 'absolute';

	var list = document.getElementById('link_list');
	var links = list.getElementsByTagName('a');

	links[0].onmouseover = function () {
		moveElement('preview', -100, 0, 10);
	};

	links[1].onmouseover = function () {
		moveElement('preview', -200, 0, 10);
	};

	links[2].onmouseover = function () {
		moveElement('preview', -300, 0, 10);
	};

}

function moveElement(elementId, finalX, finalY, interval) {
	var element = document.getElementById(elementId);
	if(element.movement) {
		clearTimeout(element.movement);
	}
	if (!element.style.left) {
		element.style.left = "0px";
	}
	if (!element.style.top) {
		element.style.top = "0px";
	}
	var xPos = parseInt(element.style.left);
	var yPos = parseInt(element.style.top);

	if (xPos == finalX && yPos == finalY) {
		return true;
	}

	var dist = 0;
	if (xPos < finalX) {
		dist = Math.ceil((finalX - xPos) / 10);
		xPos += dist;
	}

	if (xPos > finalX) {
		dist = Math.ceil((xPos - finalX) / 10);
		xPos -= dist;
	}

	if (yPos < finalY) {
		dist = Math.ceil((finalY - yPos) / 10);
		yPos += dist;
	}

	if (yPos > finalY) {
		dist = Math.ceil((yPos - finalY) / 10);
		yPos -= dist;
	}

	element.style.left = xPos + 'px';
	element.style.top = yPos + 'px';
	var repeat = "moveElement('" + elementId + "', " + finalX + "," + finalY + "," + interval + ")";
	element.movement = setTimeout(repeat, interval);	//这儿直接为element代表的节点创建了一个属性并赋值

}